<template>
    <div>
        <my-header></my-header>
        <Input v-model="searchInfo" class="search_box" @on-enter="search()" size='large'>
            <Select v-model="searchType" slot="prepend" style="width: 80px">
                <Option value="bookName">书名</Option>
                <Option value="author">作者</Option>
                <Option value="ISBN">ISBN编号</Option>
            </Select>
            <Button slot="append" icon="ios-search" @click="search()"></Button>
        </Input>
        <Table class="search_result" stripe @on-row-click="bookDetail" :columns="columns" :data="showData"></Table>
        <Page class="result_page" :page-size="pageSize" show-total show-elevator :total="this.data.length" :current="1" @on-change="changePage"></Page>
        <my-footer></my-footer>
    </div>
</template>

<script>
import myHeader from '../../components/header'
import myFooter from '../../components/footer'

export default {
    components: {
        myHeader,
        myFooter
    },
    data() {
        return {
            searchInfo: '',
            searchType: 'bookName',
            pageSize: 11,
            columns: [
                { type: 'index', align: 'center', width: 70 },
                { title:'书名', key: 'bookName' },
                { title: '作者', key: 'bookAuthor' },
                { title: 'ISBN', key: 'bookISBN' },
                { title: '出版社', key: 'bookPublish' },
                { title: '价格', key: 'bookPrice' },
                { title: '数量', key: 'bookCount' },
            ],
            showData: [],
            data: [
                { bookName: 'dasdsa', bookAuthor: 'sun', bookISBN:'156156', bookPublish:'dasxczczx', bookPrice: 30, bookCount: 3, bookId: '15616' },

            ]
        }
    },
    mounted() {
        this.searchInfo = this.$route.query.searchInfo;
        this.showData = this.data.slice(0, this.pageSize);
    },
    methods: {
        changePage(page) {
            this.showData = this.data.slice((page - 1) * this.pageSize, page * this.pageSize);
        },
        bookDetail(index) {
            this.$router.push({
                path: '/bookDetail',
                query: {
                    bookId: index.bookId
                }
            })
        }
    },
}
</script>

<style scoped>
.search_box{
    width: 21vw;
    margin-top: 160px;
    margin-left: 18vw;
}
.search_result{
    width: 66vw;
    margin-top: 30px;
    margin-left: 18vw;
    height: 570px;
}
.result_page{
    margin-top: 50px;
    margin-left: 60vw;
}
</style>

